<!--  -->
<template>
    <div class="app-container df">
        <div>
            <span>核销方式：</span>
        </div>
        <div class="fBox">
            <template v-for="(i, index) in modes">
                <div style="margin-bottom: 15px">
                    <el-checkbox
                        style="width: 200px"
                        v-model="i.value"
                        :label="i.label"
                        @change
                    ></el-checkbox>
                    <el-button
                        type="primary"
                        size="small"
                        @click="edit(index)"
                        style="margin-left: 35px"
                        >编辑</el-button
                    >
                    <el-button
                        type="danger"
                        size="small"
                        v-if="index != 0"
                        @click="del(index)"
                        >删除</el-button
                    >
                </div>
            </template>

            <el-button
                type="primary"
                size="small"
                style="margin-top: 50px"
                @click="add()"
                >新增</el-button
            ><el-button
                type="primary"
                size="small"
                style="margin-top: 50px"
                @click=""
                >保存</el-button
            ><el-button type="" size="small" style="margin-top: 50px" @click=""
                >重置</el-button
            >
        </div>
        <el-dialog
            :title="dtitle"
            :visible.sync="showDialog"
            width="30%"
            @close=""
        >
            <el-input v-model="cdata" size="normal" clearable></el-input>

            <span slot="footer">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "",
    data () {
        return {
            dtitle: "新增",
            showDialog: false,
            cdata: "",
            i: '',
            modes: [{ value: "手机号核销", label: "手机号核销" }],
        };
    },
    methods: {
        add () {
            this.dtitle = "新增";
            this.cdata = "";
            this.showDialog = true;
        },
        edit (i) {
            this.dtitle = "编辑";
            this.i = i;
            this.cdata = this.modes[this.i].label
            this.showDialog = true;
        },
        del () { },
        submit () {
            if (this.dtitle == "新增") {
                this.modes.push({ value: this.cdata, label: this.cdata });
            } else if (this.dtitle == '编辑') {
                this.modes[this.i] = { value: this.cdata, label: this.cdata }
            }

            this.showDialog = false;
        },
    },
};
</script>
<style scoped>
.df {
    display: flex;
    margin: 30px;
}
.fBox {
    margin-left: 30px;
}
</style>